<template>
  <div class="settings">
    <!-- CUSTOMER角色显示提示信息 -->
    <el-card v-if="userStore.userInfo?.role === 'CUSTOMER'">
      <div class="welcome-message">
        <h2>系统设置</h2>
        <p>您没有权限访问系统设置功能，请联系管理员</p>
      </div>
    </el-card>
    
    <!-- 非CUSTOMER角色显示设置内容 -->
    <div v-if="userStore.userInfo?.role !== 'CUSTOMER'">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="用户管理" name="user" v-if="userStore.userInfo?.role === 'ADMIN'">
          <UserManagement />
        </el-tab-pane>
        <el-tab-pane label="港口管理" name="port" v-if="userStore.userInfo?.role !== 'CUSTOMER'">
          <PortManagement />
        </el-tab-pane>
        <el-tab-pane label="公司管理" name="company" v-if="userStore.userInfo?.role !== 'CUSTOMER'">
          <CompanyManagement />
        </el-tab-pane>
        <el-tab-pane label="仓库管理" name="warehouse" v-if="userStore.userInfo?.role !== 'CUSTOMER'">
          <WarehouseManagement />
        </el-tab-pane>
        <el-tab-pane label="系统设置" name="system" v-if="userStore.userInfo?.role === 'ADMIN'">
          <el-card class="mb-20">
            <template #header>
              <span>系统设置</span>
            </template>
            <el-form :model="settings" label-width="120px">
              <el-form-item label="系统名称">
                <el-input v-model="settings.systemName" />
              </el-form-item>
              <el-form-item label="系统版本">
                <el-input v-model="settings.version" disabled />
              </el-form-item>
              <el-form-item label="管理员邮箱">
                <el-input v-model="settings.adminEmail" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveSettings">保存设置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import UserManagement from '../components/UserManagement.vue'
import PortManagement from '../components/PortManagement.vue'
import CompanyManagement from '../components/CompanyManagement.vue'
import WarehouseManagement from '../components/WarehouseManagement.vue'

const userStore = useUserStore()
const activeTab = ref('port') // 默认显示港口管理
const settings = ref({
  systemName: '港口堆存费管理系统',
  version: '1.0.0',
  adminEmail: 'admin@example.com'
})

const saveSettings = () => {
  ElMessage.success('设置保存成功')
}

onMounted(() => {
  // 根据用户角色设置默认标签页
  if (userStore.userInfo?.role === 'ADMIN') {
    activeTab.value = 'user' // ADMIN默认显示用户管理
  } else if (userStore.userInfo?.role === 'OPERATOR') {
    activeTab.value = 'port' // OPERATOR默认显示港口管理
  }
})
</script>

<style scoped>
.settings {
  padding: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.welcome-message {
  text-align: center;
  padding: 40px;
}
.welcome-message h2 {
  color: #409EFF;
  margin-bottom: 20px;
}
.welcome-message p {
  color: #666;
  font-size: 16px;
}
</style>